<template>
	<div>
		<h3>歌单详情</h3>
		<div class="listimg">
			<!-- 封面 -->
			<el-image :src="songsList.coverImgUrl" class="el-image"></el-image>
		</div>
		<p>{{songsList.description}}</p>
		<el-table
				:data="songsList.tracks"
				stripe
				style="width: 100%" background-color="#dfdfdf" default-active="/pageone" :router="true" active-text-color="#F56C6C">
			<el-table-column
					type="index"
					width="50">
			</el-table-column>
			<el-table-column label="音乐">
				<template v-slot="{ row }">
					<div class="name-wrap">
						<span @click="play(row.id)" class="item">{{ row.name }}</span>
						<!--<span v-if="row.mvid !== 0" class="iconfont icon-MV" @click="toMv(row.mvid)"></span>-->
					</div>
				</template>
			</el-table-column>
			<!--<el-table-column
					prop="artists[0].name"
					label="歌手"
					width="200">
			</el-table-column>
			<el-table-column
					prop="album.name"
					label="专辑"
					width="200">
			</el-table-column>-->
		</el-table>
		<div style="height: 200px">

		</div>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "list",
		props: ['id'],
		data() {
			return {
				songsList:[],
				songs:[]
			}
		},
		methods: {
			play(id) {
				axios({
					url: "https://autumnfish.cn/song/url",
					methods: "get",
					params: {
						id
					},
				}).then(res => {
					this.$store.state.url = res.data.data[0].url;
				})
			},
		},
		created(){
			console.log(this.id)
			axios({
				url:"https://autumnfish.cn/playlist/detail",
				methods: "get",
				params:{
					id:this.id
				},
			}).then(res=>{
				console.log(res)
				this.songsList=res.data.playlist
			})
		}
	}
</script>

<style scoped>
	.listimg{
		width: 25%;
	}
	.el-image{
		text-align: center;
	}
</style>